<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" style="padding-top: 10px">
                <Col span="8">
                    <FormItem label="人员姓名：">
                        <Input type="text" v-model="form1.staffName"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="相关方名称：">
                        <Input type="text" v-model="form1.contractorName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button icon="md-search" class="ivu-btn-query" @click="query()">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form" style="padding-top: 10px">
                <Col span="8">
                    <FormItem label="人员姓名：">
                        <Input type="text" v-model="form1.staffName"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="相关方名称：">
                        <Input type="text" v-model="form1.contractorName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属单位：">
                        <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                                     :rootOrgId="companyId"
                                     :orgTree="true"></cascaderDom>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" :loading="loading" size="small" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal :transfer=false v-model="model1" :width=800 :mask-closable="false"
               @on-cancel="onCancel">
            <p>
                <span> </span>
            </p>
            <div>
                <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleshow">
                    <MenuItem :name="1">人员基本信息</MenuItem>
                    <MenuItem :name="2">上传附件</MenuItem>
                    <MenuItem :name="3">人员身份证</MenuItem>
                    <MenuItem :name="4">保险</MenuItem>
                    <MenuItem :name="5">证书</MenuItem>
                </Menu>
                <Form ref='InputData' :model="InputData" :rules="ruleCustom" label-position="top">
                    <!--:label-width="120"-->
                    <div v-show="modaleshow==1">
                        <br/>
                        <Row style="line-height: 28px;margin-left: 10px">
                            <Col span='7'>
                                <FormItem label='人员姓名：' prop="staffName">
                                    <Input v-model="InputData.staffName"/>
                                </FormItem>
                            </Col>
                            <Col span='7' offset="1">
                                <FormItem label='手机号：' prop="staffCell">
                                    <Input v-model="InputData.staffCell"/>
                                </FormItem>
                            </Col>
                            <Col span='7' offset="1">
                                <FormItem label='身份证号：'>
                                    <Input v-model="InputData.staffIdentity"/>
                                </FormItem>
                            </Col>
                            <Col span='15'>
                                <FormItem label='相关方作业事项：' prop="workingMatters">
                                    <Input v-model="InputData.workingMatters" readonly @on-focus="modelSearch=true"  suffix="ios-search"/>
                                    <!--<Button slot="append" @click="selectContractor" icon="ios-search"></Button>-->
                                    <!--</Input>-->
                                </FormItem>
                            </Col>
                            <Col span='7' offset="1">
                                <FormItem label='相关方名称：' prop="contractorName">
                                    <Input v-model="InputData.contractorName" readonly />
                                    <!--<Button slot="append" @click="selectContractor" icon="ios-search"></Button>-->
                                    <!--</Input>-->
                                </FormItem>
                            </Col>
                             <Col span='7'>
                                 <FormItem label='所属单位：' prop="companyName">
                                     <Input readonly v-model="InputData.companyName"/>
                                 </FormItem>
                             </Col>
                            <Col span='7' offset="1">
                                <FormItem label='经办人：' prop="handlerName">
                                    <Input v-model="InputData.handlerName"/>
                                </FormItem>
                            </Col>
                            <Col span='7' offset="1">
                                <FormItem label='状态：' prop="staffStatusId">
                                    <!--<Input v-model="InputData.staffStatusId"/>-->
                                    <Select v-model="InputData.staffStatusId">
                                        <Option value="1">在用</Option>
                                        <Option value="2">停用</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span='7' >
                                <FormItem label='入场时间：' prop="startDate">
                                    <Date-picker type="date" style="width: 100%" v-model="InputData.startDate"/>
                                </FormItem>
                            </Col>
                            <Col span='7' offset="1">
                                <FormItem label='离场时间：'>
                                    <Date-picker type="date" style="width: 100%" v-model="InputData.endDate"/>
                                </FormItem>
                            </Col>
                            <Col span='23'>
                                <FormItem label='备注：'>
                                    <Input v-model="InputData.notes" type="textarea" :autosize="{minRows:2,maxRows:5}"/>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div v-show="modaleshow==2">
                        <br/>
                      <Row>
                        <Col span="24">
                          <div style="margin-left:10%;width: 81%">
                            <Upload ref="upload"
                                    :before-upload="beforeUpload"
                                    :show-upload-list="true"
                                    :max-size="10240"
                                    multiple
                                    type="drag"
                                    :action="fileUrl">
                              <div style="padding: 20px">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击将文件拖拽到这里上传</p>
                                <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                              </div>
                            </Upload>
                          </div>
                          <FormItem style="margin-left: 70px" label="附件：" v-show="uploadList2.length>0">
                            <div v-for="item in uploadList2" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}</a>
                              <Button type="text" icon="md-trash" @click="remove1(item.id,modaleshow)"
                                      style="margin-left: 20px;margin-bottom: 3px"/>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-show="modaleshow==3">
                        <br/>
                      <Row>
                        <Col span="24">

                          <div style="margin-left:10%;width: 81%">
                            <Upload ref="upload"
                                    :before-upload="beforeUpload"
                                    :show-upload-list="true"
                                    :max-size="10240"
                                    accept="image/png, image/jpeg,image/jpg"
                                    :format="['jpg','jpeg','png']"
                                    multiple
                                    type="drag"
                                    :action="fileUrl+'/'+InputData.staffId+'/files/picture/idCard'">
                              <div style="padding: 20px">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击将文件拖拽到这里上传</p>
                                <span style="font-size:8px;color: #797a64">支持扩展名：.jpg .jpeg .png</span>
                              </div>
                            </Upload>
                          </div>
                          <FormItem style="margin-left: 80px" label="附件：" v-show="uploadList3.length>0">
                            <div v-for="item in uploadList3" :key='item'>
                              <img :src="item.picture"
                                   style="width: 75%;height: 70%;">
                              <Button type="text" icon="md-trash" @click="remove1(item.id,modaleshow)"
                                      style="margin-left: 5px;margin-bottom: 3px"/>
                              <!--<a @click="remove1(item.id,modaleshow)"><span style="color: #3399ff;margin-left: 5px">取消</span></a>-->
                              <!--<Button type="text" @click="downloadFile(InputData.staffId,item)"><span-->
                              <!--style="color: #3399ff">下载</span>-->
                              <!--</Button>-->
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-show="modaleshow==4">
                        <br/>
                      <Row>
                        <Col span="24">
                          <div style="margin-left:10%;width: 81%">
                            <Upload ref="upload"
                                    :before-upload="beforeUpload"
                                    :show-upload-list="true"
                                    :max-size="10240"
                                    multiple
                                    type="drag"
                                    :action="fileUrl+'/'+InputData.staffId+'/files/userFile/lnsurance'">
                              <div style="padding: 20px">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击将文件拖拽到这里上传</p>
                                <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                              </div>
                            </Upload>
                          </div>
                          <FormItem style="margin-left: 70px" label="附件：" v-show="uploadList4.length>0">
                            <div v-for="item in uploadList4" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}</a>
                              <Button type="text" icon="md-trash" @click="remove1(item.id,modaleshow)"
                                      style="margin-left: 5px;margin-bottom: 3px"/>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-show="modaleshow==5">
                        <br/>
                      <Row>
                        <Col span="24">
                          <div style="margin-left:10%;width: 81%">
                            <Upload ref="upload"
                                    :before-upload="beforeUpload"
                                    :show-upload-list="true"
                                    :max-size="10240"
                                    multiple
                                    type="drag"
                                    :action="fileUrl+'/'+InputData.staffId+'/files/userFile/certificate'">
                              <div style="padding: 20px">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击将文件拖拽到这里上传</p>
                                <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                              </div>
                            </Upload>
                          </div>
                          <FormItem style="margin-left: 70px" label="附件：" v-show="uploadList5.length>0">
                            <div v-for="item in uploadList5" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}</a>
                              <Button type="text" icon="md-trash" @click="remove1(item.id,modaleshow)"
                                      style="margin-left: 5px;margin-bottom: 3px"/>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                </Form>
                <Modal title="相关方作业信息" :transfer=false footer-hide v-model="modelSearch" :width=900>
                    <working-related-parties v-if="modelSearch" v-show="modelSearch" :modelSearch="modelSearch"
                                      @getSelectModelData='getSelectModelData' :companyId="companyId"></working-related-parties>
                    <div slot="footer">
                        <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
                    </div>
                </Modal>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' v-show="modaleshow===5" :loading="buttonLoading" @click="submit('InputData')">确定</Button>
                <Button class='ivu-btn-cancel' @click="onCancel">取消</Button>
                <Button class='ivu-btn-cancel' v-show="modaleshow!==5" @click="spitTo('InputData')">下一步</Button>
                <Button class='ivu-btn-cancel' v-show="modaleshow!==1" @click="modaleshow--">上一步</Button>
            </div>
        </Modal>

        <Modal :transfer=false v-model="model3" :width=800 @on-cancel="onCancel">
            <p>
                <span> </span>
            </p>
            <div>
                <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleshow">
                    <MenuItem :name="1">人员基本信息</MenuItem>
                    <MenuItem :name="2">附件</MenuItem>
                    <MenuItem :name="3">人员身份证</MenuItem>
                    <MenuItem :name="4">保险</MenuItem>
                    <MenuItem :name="5">证书</MenuItem>
                </Menu>
                <Form :model="InputData" label-position="top" class="modal-view-detail">
                    <!--:label-width="120"-->
                    <div v-if="modaleshow==1" style="line-height: 42px">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='7'>
                                <span>人员姓名：{{InputData.staffName}}</span>
                            </Col>
                            <Col span='15' offset="1">
                                <span>相关方作业事项：{{InputData.workingMatters}}</span>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='7'>
                                <span>身份证号：{{InputData.staffIdentity}}</span>
                            </Col>
                            <Col span='15' offset="1">
                                <span>相关方名称：{{InputData.contractorName}}</span>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='7'>
                                <span>手机号：{{InputData.staffCell}}</span>
                            </Col>
                            <Col span='15' offset="1">
                                <span>所属单位：{{InputData.companyName}}</span>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='7'>
                                <span>经办人：{{InputData.handlerName}}</span>
                            </Col>
                            <!--<Col span='7' offset="1">
                                <span>状态：{{InputData.staffStatusId=='1'?'在用':'停用'}}</span>
                            </Col>-->
                            <Col span='7' offset="1">
                                <span>入场时间：{{startDate}}</span>
                            </Col>
                            <Col span='7' offset="1">
                                <span>离场时间：{{endDate}}</span>
                            </Col>
                        </Row>
                       <!-- <Row type="flex" justify="space-around" class="code-row-bg">

                            <Col span='16'></Col>
                        </Row>-->
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='23'>
                                <span>备注：{{InputData.notes}}</span>
                            </Col>
                        </Row>
                    </div>
                    <div v-if="modaleshow==2">
                        <br/>
                      <Row>
                        <Col span="24">
                          <FormItem style="margin-left: 70px" label="" v-show="uploadList2.length>0">
                            <div v-for="item in uploadList2" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}
                              </a>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-if="modaleshow==3">
                        <br/>
                      <Row>
                        <Col span="24">
                          <FormItem style="margin-left: 80px" label="" v-show="uploadList3.length>0">
                            <div v-for="item in uploadList3" :key='item'>

                              <!--<div class="demo-upload-list-cover">-->
                              <!--<a :href="item.picture"></a>-->
                              <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                <img :src="item.picture" style="width: 450px;height:220px;">
                              </router-link>
                              <!--</div>-->

                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-if="modaleshow==4">
                        <br/>
                      <Row>
                        <Col span="24">
                          <FormItem style="margin-left: 70px" label="" v-show="uploadList4.length>0">
                            <div v-for="item in uploadList4" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}
                              </a>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>
                    <div v-if="modaleshow==5">
                        <br/>
                      <Row>
                        <Col span="24">
                          <FormItem style="margin-left: 70px" label="" v-show="uploadList5.length>0">
                            <div v-for="item in uploadList5" :key='item'>
                              <a @click="downloadFile(InputData.staffId,item)">{{ item.fileName }}
                              </a>
                            </div>
                          </FormItem>
                        </Col>
                      </Row>

                    </div>

                </Form>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';
import cascaderDom from '../../../components/cascader-dom.vue';
import workingRelatedParties from './workingRelatedParties.vue'

export default {
        components: {cascaderDom, workingRelatedParties},
        name: "interestedPartiesUser",
        data() {
            return {
                tableHeight: '',
                switchFlag: false,
                loading: false,
                form1: {
                    staffName: '',
                    contractorName: '',
                    orgId: '',
                    orgName: ''
                },
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                fileUrl: Api.interestedPartiesUserFile,
                dataTable: [],
                ruleCustom: {
                    staffName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blue'
                    }],
                    staffIdentity: [{
                        validator: (rule, value, callback) => {
                            let reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
                            if (value === '' || value === undefined || value == null) {
                                callback(' ')
                            } else {
                                if (reg.test(value)) {
                                    callback();
                                } else {
                                    callback(' ');
                                }
                            }
                        },
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    propertyId: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    staffCell: [{
                        validator: (rule, value, callback) => {
                            let reg = /^1[0-9]{10}$/;
                            if (value === '' || value === undefined || value == null) {
                                callback(' ')
                            } else {
                                if (reg.test(value)) {
                                    callback();
                                } else {
                                    callback(' ');
                                }
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    contractorName: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    handlerName: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    staffStatusId: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    endDate: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    startDate: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                },
                columns1: [
                    {title: "序号", width: 80, align: "center", fixed: 'left',
                        render: (h, params) => {return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);}},
                    {width: 100, title: '人员姓名', align: 'center', key: 'staffName',},
                    {minWidth: 150, title: '作业事项', align: 'center', key: 'workingMatters',tooltip:true},
                    {minWidth: 150, title: '相关方名称', align: 'center', key: 'contractorName',},
                    {width: 200, minWidth: 150, title: '所属单位', align: 'center', key: 'companyName',},
                    {width: 100, title: '人员状态', align: 'center', key: 'staffStatusId',
                        render: (h, params) => {return h('span', params.row.staffStatusId == '1' ? '在用' : '停用')}},
                    {width: 130, title: '入场时间', align: 'center', key: 'startDate',
                        render: (h, params) => {let startDate = new Date(params.row.startDate);
                        return h('span', startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate())}},
                    {
                        width: 130,
                        title: '离场时间',
                        align: 'center',
                        key: 'endDate',
                        render: (h, params) => {
                            let endDate =params.row.endDate? new Date(params.row.endDate):null;
                            return h('span',!endDate?"":endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate())
                        }
                    },
                    {
                        width: 100,
                        title: '经办人',
                        align: 'center',
                        key: 'handlerName',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            let endDate =params.row.endDate? new Date(params.row.endDate):null;
                                            let startDate = new Date(params.row.startDate);
                                            this.startDate = startDate.getFullYear() + '-' + (startDate.getMonth() + 1) + '-' + startDate.getDate()
                                            this.endDate = !endDate?'':endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate()
                                            this.InputData = params.row;
                                            this.model3 = true;
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: (params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId )||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                                            ||sessionStorage('userId').getObject('userId').userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined)? '':'#d0d0d0' ,
                                        pointerEvents: (params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId )||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                                            ||sessionStorage('userId').getObject('userId').userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined) ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.InputData = params.row;
                                            this.model1 = true;
                                            this.add = false
                                            this.modaleshow = 1
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: (params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId )||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                                            ||sessionStorage('userId').getObject('userId').userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined)? 'red':'#d0d0d0' ,
                                        pointerEvents: (params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId )||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                                            ||sessionStorage('userId').getObject('userId').userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined) ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                startDate: '',
                endDate: '',
                add: false,
                model1: false,
                model3: false,
                InputData: {},
                modaleshow: '1',
                buttonLoading: false,
                uploadList: [],
                uploadList2: [],
                uploadList3: [],
                uploadList4: [],
                uploadList5: [],

                companyId: '',
                modelSearch:false
            }
        },
        mounted() {
            this.companyId = sessionStorage('userId').getObject('userId').companyId
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query()
        },
        methods: {
            getSelectModelData(row) {
                this.modelSearch = false;
                // this.InputData.contractorId = row.contractorId
                this.InputData.contractorName = row.relatedPartiesName//相关方名称
                this.InputData.workingMatters = row.workingMatters//作业事项
                this.InputData.workingRelatedId = row.id//相关方作业id
                // this.model2 = false
                // this.model1 = true
            },

            downloadFile(staffId, file) {
                let url = this.fileUrl + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    console.log(res)
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(id, name) {
                console.log(id)
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.lowerStep(name)
                })
            },
            onCancel() {
                this.InputData = {}
                this.modaleshow = '1'
                this.model1 = false
                this.model3 = false
                this.query()
            },

            beforeUpload(file) {
                // this.uploadList.push(file)
                // console.log(this.uploadList)
                let url = ''
                let formData = new FormData();
                formData.append("files", file); // 文件对象
                if (this.modaleshow == 2) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile/userFile'
                    console.log(url)
                } else if (this.modaleshow == 3) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/picture/idCard'
                } else if (this.modaleshow == 4) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile/insurance'
                } else if (this.modaleshow == 5) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile/certificate'
                }
                this.$http.post(url, formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.info("文件上传成功")
                        this.lowerStep(this.modaleshow)
                    }
                })
                return false
            },
            lowerStep(name) {
                this.uploadList = []
                let url = ''
                let field = ''
                if (name == 2) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile' //
                    field = 'userFile'
                } else if (name == 3) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/picture' //idCard
                    field = 'idCard'
                } else if (name == 4) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile' //lnsurance
                    field = 'insurance'
                } else if (name == 5) {
                    url = this.fileUrl + '/' + this.InputData.staffId + '/files/userFile' //certificate
                    field = 'certificate'
                }
                this.$http.get(url + "?field=" + field).then((res) => {
                    if (res.data.result == "success") {
                        console.log(res.data)
                        if (name == '2') {
                            this.uploadList2 = res.data.data
                        } else if (name == '3') {
                            this.uploadList3 = res.data.data
                        } else if (name == '4') {
                            this.uploadList4 = res.data.data
                        } else if (name == '5') {
                            this.uploadList5 = res.data.data
                        }
                    }
                })
                this.modaleshow = name
            },
            spitTo(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modaleshow++
                    }else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true
                        if (this.add) {
                            let url = Api.interestedPartiesUserAdd
                            this.InputData.bsflag = '0'
                            this.InputData.createOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.InputData.createUserId = sessionStorage('userId').getObject('userId').userId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.query()
                                this.buttonLoading = false
                                this.model1 = false
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        } else {
                            let url = Api.interestedPartiesUserUpdate;
                            this.InputData.updateUserId = sessionStorage('userId').getObject('userId').userId
                            this.InputData.updateOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        }
                    } else {
                        this.$Message.error('失败!');
                    }
                })

            },

            deleteData(row) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认删除此行数据？</p>',
                    onOk: () => {
                        let url = Api.interestedPartiesUserDelete + '/' + row.staffId
                        this.$http.delete(url).then((res) => {
                            this.$Message.success('成功');
                            this.query()
                        }).catch(e => {
                            this.$Message.error("数据获取失败")
                        })
                    },
                    onCancel: () => {
                    }
                });
            },
            addInfo() {
                this.add = true;
                this.modaleshow = 1
                this.buttonLoading = false
                this.InputData = {
                    staffId: this.get_uuid(),
                    companyId:sessionStorage('userId').getObject('userId').companyId,
                    companyName:sessionStorage('userId').getObject('userId').companyName,
                    handlerName:sessionStorage('userId').getObject('userId').userName,
                };
                this.model1 = true;
            },
            query() {
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                }
                if (this.form1.orgId == '') {
                    this.form1.orgId = this.companyId
                }
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                let url = Api.interestedPartiesUserList
                this.$http.get(url, {params: data}).then((res) => {
                    console.log(res.data);
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {
                    staffName: '',
                    contractorName: '',
                    orgId: '',
                    orgName: ''
                }
                this.pagedata.currentPage = 1;
                this.$refs.childOrg.resetCurrentOrg();
                this.query();
            },
            switchQuery(flag) {
                this.switchFlag = flag;
                if (!this.switchFlag) {
                    this.tableHeight = this.tableHeight + 44;
                } else {
                    this.tableHeight = this.tableHeight - 44;
                }
            },
            setOrgId(data) {
                this.form1.orgId = data[data.length - 1];
            },
            setOrgName(data) {
                this.form1.orgName = data;
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
        }
    }
</script>

<style scoped>
    @import '../../../index.css';

</style>
